<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>珂珂360浏览器</title>
<!--	注意要把这个fullpage文件放到index.css的上面-->
<link rel="stylesheet" href="css/fullpage.css">
<link rel="stylesheet" href="css/index.css">
</head>

<body>
<!--	固定导航栏——固定定位 -->
<!--	给盒子设置固定定位，这样盒子总是以当前浏览器为准对齐，不会随着浏览器而滚动-->
<!--	.header+tab-->
	<div class="header">
		<div class="headerContent">
			<img src="images/logo.png" alt=" ">
			<div class="nav">
				<a href="#">论坛</a>
				<a href="#">扩展</a>
				<a href="#">Mac版</a>
			</div>
		</div>
	</div> 
<!--	全屏滚动的代码-->
<!--	注意放在固定导航栏的下面-->
	<div id="fullpage">
<!--		标签是可以添加多个类名的，如section section1，这样可以更方便添加不同样式-->
<!--第一屏-->
		<div class="section section1">
			<div class="title-box">
				<p>畅快浏览 极致体验</p>
				<a href="#"></a>
			</div>
<!--			第一个小球-->
			<img src="images/ball1.png" alt="" class="ball1">
<!--			第二个大球-->
			<img src="images/ball2.png" alt="" class="ball2">
<!--			卫星-->
			<img src="images/ship.png" alt="" class="ship">
		</div>
<!--第二屏-->
		<div class="section section2">
<!--			autoplay让视频自动播放，但只会播放一次-->
<!--			loop 无限循环-->
<!--			muted 播放视频的时候静音-->
			<video autoplay loop muted>
<!--		<video autoplay="autoplay">        两个写法都行-->
				<source src="https://s2.ssl.qhres2.com/static/dfeefadde568eab0.mp4" type="video/mp4">
				您的浏览器不支持该视频
			</video>
<!--			文字模式-->
			<div class="word-content">
				<p class="bigword">极速</p>
				<div class="line"></div>
				<p class="midword">Chromium78全新内核</p>
				<p class="smallword">性能强劲，快如闪电</p>
				<a href="#"></a>
			</div>
		</div>
<!--第三屏-->		
		<div class="section section3">
			<video autoplay loop muted>
				<source src="https://s3.ssl.qhres2.com/static/9bebcedf292f327e.mp4" type="video/mp4">
				您的浏览器不支持该视频
			</video>
			<div class="word-content">
				<p class="bigword">极酷</p>
				<div class="line"></div>
				<p class="midword">暗夜炫黑模式</p>
				<p class="smallword">定义酷，定义你</p>
				<a href="#"></a>
			</div>
		</div>
<!--第四屏-->		 
		<div class="section section4">
			<video autoplay loop muted>
				<source src="https://s1.ssl.qhres2.com/static/fdf92889c539303c.mp4" type="video/mp4">
				您的浏览器不支持该视频
			</video>
			<div class="word-content">
				<p class="bigword">极安全</p>
				<div class="line"></div>
				<p class="midword">DNS加密防劫持</p>
				<p class="smallword">安全升级，肆意无忌</p>
				<a href="#"></a>
			</div>
		</div>
<!--第五屏-->		
		<div class="section section5">
			<video autoplay loop muted>
				<source src="https://s1.ssl.qhres2.com/static/7e7f0ec4a0cc7a66.mp4" type="video/mp4">
				您的浏览器不支持该视频
			</video>
			<div class="word-content">
				<p class="bigword">极视界</p>
				<div class="line"></div>
				<p class="midword">4K高清视频播放</p>
				<p class="smallword">还原真实之美，尽显万物本色</p>
				<a href="#"></a>
			</div>
<!--			底部模块-->
			<div class="footer">
				Copyright @ 2005-2019 360.CN All Rights Reserved 360互联网安全中心 隐私权政策 京ICP证080047号 <br>
				<img src="images/icon.png" alt="">
				京公网安备11000002000006号
			</div>
		</div>	
	</div>
<!--	必须先引入jquery.min.js 再引入fullpage.js-->
	<script src="js/jquery.min.js"></script>
	<script src="js/fullpage.js"></script>
<!--	必须放到这里-->
<script>
	$(function() {
		$('#fullpage').fullpage({
			'navigation':true,
		//滚动到当前屏幕，文字模块渐渐显示出来
			afterLoad:function () {
				$(this).find('.word-content').fadeIn();
			},
		//离开当前页面，文字模块渐渐淡出
			onLeave: function () {
				$(this).find('.word-content').fadeOut();
			},
		});
	});
</script>
	
</body>
</html>